<template>
    <div>
        <div>
            <el-input class="searchInput" 
                    clearable
					@clear="keywordClear"
                    v-model="keyword"
                    placeholder="请输入学号搜索学生..."
                    @keydown.enter.native="doSearch"
                    prefix-icon="el-icon-search">
            </el-input>
            <el-button icon="el-icon-search" type="primary" @click="doSearch">搜索</el-button>
			<el-dropdown style="margin-left: 30px;margin-right: 12px;">
			  <el-button type="primary" size="small">
			    查看实习岗位<i class="el-icon-arrow-down el-icon--right"></i>
			  </el-button>
			  <el-dropdown-menu slot="dropdown">
			    <el-dropdown-item v-for="(item,index) in basePosition" :key="index">{{ item.name }}</el-dropdown-item>
			  </el-dropdown-menu>
			</el-dropdown>
			<el-input size="small" v-model="inputPosition" clearable style="width: 138px;" placeholder="请输入实习岗位"></el-input>
			<el-button style="margin-left: 8px;" size="small" type="primary" @click="addPosition">添 加</el-button>
			<el-button size="small" type="primary" @click="deletePosition">删 除</el-button>
        </div>
        <div style="margin-top: 10px">
                <el-table   
                        :data="studentToPosition"
                        stripe
                        border
                        style="width: 63%">
                    <el-table-column
                            prop="studentId" label="学号" width="130">
                    </el-table-column>
                    <el-table-column
                            prop="sname" label="姓名" width="75">
                    </el-table-column>
                    <el-table-column
                            prop="gender" label="性别" width="60">
                    </el-table-column>
                    <el-table-column
                            prop="mname" label="专业" width="150">
                    </el-table-column>
                    <el-table-column
                            prop="level" label="学级" width="60">
                    </el-table-column>
                    <el-table-column
                            prop="cname" label="班级" width="100">
                    </el-table-column>
                    <el-table-column 
                            prop="pname" label="实习岗位" width="130">
                    </el-table-column>
					<el-table-column label="操作">
					    <template slot-scope="scope">
					            <el-button @click="showAddView(scope.row)" style="padding: 8px" size="small" 
								type="primary" v-if="!scope.row.spId">添加职位</el-button>
					            <el-button @click="showEditView(scope.row)" style="padding: 8px" size="small" 
								type="danger" v-if="scope.row.spId">修改职位</el-button>
					    </template>
					</el-table-column>
                </el-table>
            </div>
			<div style="width: 63%; display: flex; justify-content: flex-end;">
			    <el-pagination
					@current-change="currentChange"
					:current-page="current"
			        :page-size="size"
			        layout="total, prev, pager, next"
			        :total="total">
			    </el-pagination>
			</div>
			<el-dialog :title="title" :visible.sync="dialogVisible" width="35%" center :close-on-click-modal="false" :destroy-on-close="destroyOnClose">
				<div style="display: flex;justify-content: flex-start;">
					<el-form :model="positionInfo" :rules="rules" ref="positionForm" label-width="100px">
						<el-form-item label="实习岗位" prop="pid">
							<el-select v-model="positionInfo.pid" placeholder="请选择实习岗位" filterable style="width: 260px;">
								<el-option
								  v-for="item in basePosition"
								  :key="item.id"
								  :label="item.name"
								  :value="item.id">
								</el-option>
							  </el-select>
						</el-form-item>
					</el-form>
				</div>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="doAddOrUpdate">确 定</el-button>
				</span>
			</el-dialog>
    </div>
</template>

<script>
    export default {
        data () {
            return {
				inputPosition: '',
				thePosition: {name:''},
				studentToPosition:[],
                keyword:'',
				current: 1,
				size: 10,
				total: 0,
				basePosition:[],
				title: '',
				dialogVisible: false,
				destroyOnClose: false,
				positionInfo: {},
				rules: {
					pid: [{required: true, message: '请选择实习岗位', trigger: 'blur'}],
				}
            }
        },
		mounted() {
			this.initPosition();
			this.initBasePosition();
		},
        methods:{
			initPosition(){
				let url = '/practice/position/?current=' + this.current + '&size=' + this.size + '&keyword=' + this.keyword;
				this.getRequest(url).then(resp => {
					if(resp){
						this.studentToPosition = resp.data;
						this.total = resp.total;
					}
				})
			},
			initBasePosition(){
				this.getRequest('/practice/position/base_position').then(resp => {
					if(resp) {
						this.basePosition = resp;
					}
				})
			},
			keywordClear(){
				this.current = 1;
				this.initPosition();
			},
            doSearch(){
				this.current = 1;
				this.initPosition();
            },
			showAddView(data){
				this.positionInfo = data;
				this.title = '添加实习岗位';
				this.dialogVisible = true;
				this.destroyOnClose = true;
			},
			showEditView(data){
				this.title = '修改实习岗位';
				this.positionInfo = data;
				this.dialogVisible = true;
			},
			emptyPositionInfo(){
				this.positionInfo = {};
			},
			doAddOrUpdate(){
				let myPosition = {
					 
				};
				myPosition.sid = this.positionInfo.id;
				myPosition.pid = this.positionInfo.pid;
				if (this.positionInfo.spId) {
					myPosition.id = this.positionInfo.spId;
					this.$refs['positionForm'].validate(valid => {
						if (valid) {
							this.putRequest("/practice/position/", myPosition).then(resp => {
								if (resp) {
									this.dialogVisible = false;
									this.initPosition();
								}
							})
						}
					});
				} else {
					this.$refs['positionForm'].validate(valid => {
						if (valid) {
							this.postRequest("/practice/position/", myPosition).then(resp => {
								if (resp) {
									this.dialogVisible = false;
									this.initPosition();
								}
							})
						}
					});
				}
			},
			currentChange(val){
				this.current = val;
				this.initPosition();
			},
			addPosition(){
				this.thePosition.name = this.inputPosition;
				this.postRequest('/practice/position/add/',this.thePosition).then(resp => {
					if(resp) {
						this.initBasePosition();
						this.inputPosition = '';
					}
				})
			},
			deletePosition(){
				this.thePosition.name = this.inputPosition;
				this.deleteRequest('/practice/position/delete/',this.thePosition).then(resp => {
					if(resp) {
						this.initBasePosition();
						this.inputPosition = '';
					}
				})
			},
        }
    }
</script>

<style scoped>
    .searchInput{
        width: 300px;
        margin-right: 8px;
    }
</style>